<template>
  <div class="dashboard">
    <!-- 欢迎卡片 -->
    <div class="welcome-card">
      <div class="user-info">
        <div class="avatar">{{ data.user.name?.charAt(0) }}</div>
        <div class="greeting">
          <div class="role-badge" :class="data.user.role.toLowerCase()">
            {{ getRole(data.user.role) }}
          </div>
          <h2>{{ getGreeting() }}，{{ data.user.name }}</h2>
          <p>祝您今天过得开心！</p>
        </div>
      </div>
      <div class="date-info">
        <div class="time">{{ currentTime }}</div>
        <div class="date">{{ currentDate }}</div>
      </div>
    </div>

    <!--常见问题-->
    <div class="faq-section">
      <div class="faq-header">
        <h2 class="faq-title">
          <el-icon><QuestionFilled /></el-icon>
          常见问题
        </h2>
        <p class="faq-desc">{{ getRoleFaqDesc() }}</p>
      </div>

      <el-collapse class="faq-collapse">
        <el-collapse-item
            v-for="(faq, index) in getRoleFaqs()"
            :key="index"
        >
          <template #title>
            <div class="faq-item-title">
              <el-icon class="question-icon"><Question /></el-icon>
              <span>{{ faq.question }}</span>
            </div>
          </template>
          <div class="faq-item-answer">
            <el-icon class="answer-icon"><ChatDotRound /></el-icon>
            <p>{{ faq.answer }}</p>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>

    <!-- 使用指南 -->
    <div class="guide-section">
      <div class="section-header">
        <h2 class="section-title">
          <el-icon><Guide /></el-icon>
          使用流程
        </h2>
        <p class="section-desc">请按照以下步骤进行操作</p>
      </div>

      <div class="guide-timeline">
        <div
            v-for="(guide, index) in guides"
            :key="index"
            class="guide-step"
        >
          <div class="step-icon" :class="guide.status">
            <el-icon><component :is="guide.icon" /></el-icon>
          </div>
          <div class="step-content">
            <h4>{{ guide.title }}</h4>
            <p>{{ guide.content }}</p>
          </div>
          <div class="step-connector" v-if="index !== guides.length - 1">
            <div class="connector-line"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted, onBeforeUnmount } from "vue";
import { useRouter } from 'vue-router';
import {
  QuestionFilled,
  QuestionFilled as Question,
  ChatRound as ChatDotRound,
  Guide,
  Upload,
  Loading,
  User,
  Document
} from '@element-plus/icons-vue';

const router = useRouter();
const currentTime = ref('');
const currentDate = ref('');
let timer = null;

const data = reactive({
  user: JSON.parse(localStorage.getItem('system-user') || '{}'),
});

// 角色判断
const getRole = (role) => {
  const roles = {
    'User': '普通用户',
    'Admin': '管理员',
    'Expert': '专家'
  };
  return roles[role] || '访客';
};


// 根据角色获取不同的FAQ内容
const getRoleFaqs = () => {
  switch(data.user.role) {
    case 'Admin':
      return adminFaqs;
    case 'Expert':
      return expertFaqs;
    default:
      return userFaqs;
  }
};

// FAQ 描述获取函数
const getRoleFaqDesc = () => {
  switch(data.user.role) {
    case 'ADMIN':
      return '管理员常见问题解答';
    case 'EXPERT':
      return '专家诊断相关问题解答';
    default:
      return '解答您最关心的问题';
  }
};

// 问候语
const getGreeting = () => {
  const hour = new Date().getHours();
  if (hour < 6) return '凌晨好';
  if (hour < 9) return '早上好';
  if (hour < 12) return '上午好';
  if (hour < 14) return '中午好';
  if (hour < 17) return '下午好';
  if (hour < 19) return '傍晚好';
  return '晚上好';
};

// 更新时间
const updateTime = () => {
  const now = new Date();
  currentTime.value = now.toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit'
  });
  currentDate.value = now.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: 'long'
  });
};

// 管理员常见问题
const adminFaqs = [
  {
    question: '如何审核用户上传的影像？',
    answer: '检查影像是否清晰完整，确认是否包含必要的扫描序列，验证相关信息是否填写准确。如有问题可以退回要求重新提交。'
  },
  {
    question: '如何分配诊断任务给专家？',
    answer: '在任务分配页面，可以根据专家的专业方向、当前工作量等因素，选择合适的专家进行分配。系统会自动通知相关专家。'
  },
  {
    question: '如何处理用户的紧急诊断申请？',
    answer: '紧急申请会在任务列表中标红显示，建议优先处理。可以通过加急通道分配给当前在线的专家。'
  },
  {
    question: '如何处理系统异常情况？',
    answer: '遇到系统异常时，请先查看系统日志，定位问题原因。如需技术支持，可以联系技术部门处理。'
  }
];

// 专家常见问题
const expertFaqs = [
  {
    question: '如何查看待诊断的任务？',
    answer: '在"我的任务"页面可以查看分配给您的所有待诊断任务，按优先级排序显示。'
  },
  {
    question: '诊断报告需要包含哪些内容？',
    answer: '报告应包含影像观察结果、诊断意见、建议措施等内容。请使用系统提供的标准化模板进行填写。'
  },
  {
    question: '如何处理疑难病例？',
    answer: '对于疑难病例，可以申请发起专家会诊，或在专家讨论区与其他专家交流意见。'
  },
  {
    question: '如何修改已提交的报告？',
    answer: '已提交的报告如需修改，请在报告详情页点击"申请修改"，说明修改原因后等待管理员审核。'
  }
];

// 普通用户常见问题
const userFaqs = [
  {
    question: '什么是阿尔茨海默症？',
    answer: '阿尔茨海默症是一种进行性发展的神经系统退行性疾病，主要表现为记忆力减退、认知功能障碍等症状。'
  },
  {
    question: '需要准备哪些影像资料？',
    answer: '建议准备最近3个月内的脑部MRI扫描影像，包括T1、T2等序列，影像需要清晰完整。'
  },
  {
    question: '诊断流程需要多长时间？',
    answer: '一般完整的诊断流程需要3-5个工作日，具体取决于案例复杂程度。'
  },
  {
    question: '如何提高影像质量？',
    answer: '请确保按医院要求进行规范扫描，避免运动伪影，保持图像完整性。'
  }
];

// 使用指南
const guides = [
  {
    title: '上传脑影像',
    content: '上传清晰的核磁共振(MRI)脑部影像，支持多种格式',
    icon: 'Upload',
    status: 'primary'
  },
  {
    title: '等待审批',
    content: '管理员将审核您的影像质量和相关信息',
    icon: 'Loading',
    status: 'warning'
  },
  {
    title: '专家诊断',
    content: '由专业医生进行诊断分析并出具报告',
    icon: 'User',
    status: 'success'
  },
  {
    title: '查看结果',
    content: '查看详细的诊断报告和建议',
    icon: 'Document',
    status: 'info'
  }
];

// 处理快捷操作点击
const handleAction = (path) => {
  router.push(path);
};

// 生命周期钩子
onMounted(() => {
  updateTime();
  timer = setInterval(updateTime, 60000); // 每分钟更新一次
});

onBeforeUnmount(() => {
  if (timer) {
    clearInterval(timer);
  }
});
</script>


<style>
/* 整体布局 */
.dashboard {
  padding: 24px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

/* 欢迎卡片样式 */
.welcome-card {
  background: linear-gradient(135deg, #1450aa, #4b91e0);
  color: white;
  padding: 30px;
  border-radius: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  box-shadow: 0 4px 20px rgba(20, 80, 170, 0.2);
}

.user-info {
  display: flex;
  align-items: center;
  gap: 20px;
}

.avatar {
  width: 64px;
  height: 64px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
}

.greeting h2 {
  margin: 0 0 8px 0;
  font-size: 24px;
}

.greeting p {
  margin: 0;
  opacity: 0.8;
}

.role-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.2);
}

.date-info {
  text-align: right;
}

.time {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 8px;
}

.date {
  opacity: 0.8;
}

/* FAQ 部分样式 */
.faq-section {
  background: white;
  padding: 32px;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  margin-bottom: 24px;
}

.faq-header {
  text-align: center;
  margin-bottom: 32px;
  position: relative;
  padding-bottom: 16px;
}

.faq-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #1450aa, #4b91e0);
  border-radius: 3px;
}

.faq-title {
  margin: 0;
  color: #1450aa;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.faq-desc {
  margin: 8px 0 0;
  color: #666;
  font-size: 15px;
}

/* 折叠面板样式 */
.faq-collapse {
  --el-collapse-header-height: auto;
  --el-collapse-header-bg-color: transparent;
  --el-collapse-header-text-color: #333;
  --el-collapse-content-bg-color: transparent;
  --el-collapse-border-color: transparent;
}

.faq-collapse .el-collapse-item {
  background: #fff;
  border-radius: 12px;
  margin-bottom: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
  transition: all 0.3s ease;
}

.faq-collapse .el-collapse-item:hover {
  box-shadow: 0 4px 16px rgba(20, 80, 170, 0.1);
}

.faq-collapse .el-collapse-item__header {
  padding: 20px 24px;
  font-size: 16px !important;
  font-weight: 500;
  border-radius: 12px;
  border: 1px solid #ebeef5;
  transition: all 0.3s ease;
}

.faq-item-title {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #333;
}

.faq-item-title .question-icon {
  color: #1450aa;
  font-size: 20px;
  transition: all 0.3s ease;
}

.faq-collapse .el-collapse-item__wrap {
  border: none;
  border-radius: 0 0 12px 12px;
}

.faq-collapse .el-collapse-item__content {
  padding: 0;
}

.faq-item-answer {
  display: flex;
  gap: 12px;
  padding: 16px 24px 24px;
  background: #f8fafc;
  margin: 0 1px 1px 1px;
  border-radius: 0 0 12px 12px;
}

.faq-item-answer .answer-icon {
  color: #52c41a;
  font-size: 20px;
  margin-top: 2px;
}

.faq-item-answer p {
  margin: 0;
  color: #666;
  line-height: 1.8;
  font-size: 15px;
}

/* 使用指南部分 */
.guide-section {
  background: white;
  padding: 32px;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.section-header {
  margin-bottom: 32px;
  text-align: center;
  position: relative;
  padding-bottom: 16px;
}

.section-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #1450aa, #4b91e0);
  border-radius: 3px;
}

.section-title {
  margin: 0;
  color: #1450aa;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.section-desc {
  margin: 8px 0 0;
  color: #666;
  font-size: 15px;
}

.guide-timeline {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px 0;
  position: relative;
}

.guide-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  text-align: center;
  z-index: 1;
}

.step-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  font-size: 24px;
  color: white;
  transition: all 0.3s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.step-icon.primary {
  background: linear-gradient(135deg, #1450aa, #4b91e0);
}
.step-icon.warning {
  background: linear-gradient(135deg, #ff9800, #faad14);
}
.step-icon.success {
  background: linear-gradient(135deg, #52c41a, #95de64);
}
.step-icon.info {
  background: linear-gradient(135deg, #4b91e0, #69c0ff);
}

.step-content {
  max-width: 200px;
  padding: 0 12px;
}

.step-content h4 {
  margin: 0 0 8px;
  color: #333;
  font-size: 16px;
  font-weight: 500;
}

.step-content p {
  margin: 0;
  color: #666;
  font-size: 14px;
  line-height: 1.6;
}

.step-connector {
  position: absolute;
  top: 24px;
  right: -50%;
  width: 100%;
  z-index: 0;
}

.connector-line {
  height: 2px;
  background: linear-gradient(90deg, #e8e8e8 50%, transparent 50%);
  background-size: 8px 100%;
  width: 100%;
}

/* 激活状态样式 */
.faq-collapse .el-collapse-item.is-active .el-collapse-item__header {
  border-color: #1450aa;
  border-radius: 12px 12px 0 0;
  background: #f0f7ff;
}

.faq-collapse .el-collapse-item.is-active .question-icon {
  transform: rotate(180deg);
  color: #1450aa;
}

/* 响应式样式 */
@media (max-width: 768px) {
  .dashboard {
    padding: 16px;
  }

  .welcome-card {
    flex-direction: column;
    text-align: center;
    padding: 24px;
  }

  .user-info {
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
  }

  .date-info {
    text-align: center;
  }

  .faq-section,
  .guide-section {
    padding: 20px;
  }

  .faq-collapse .el-collapse-item__header {
    padding: 16px;
  }

  .faq-item-answer {
    padding: 12px 16px 16px;
  }

  .faq-item-title {
    font-size: 15px;
  }

  .faq-item-answer p {
    font-size: 14px;
  }

  .guide-timeline {
    flex-direction: column;
    gap: 32px;
    padding: 0;
  }

  .guide-step {
    width: 100%;
    flex-direction: row;
    text-align: left;
    gap: 16px;
  }

  .step-icon {
    margin-bottom: 0;
  }

  .step-content {
    max-width: none;
    padding: 0;
  }

  .step-connector {
    right: auto;
    top: auto;
    bottom: -24px;
    left: 24px;
    width: 2px;
    height: 24px;
  }

  .connector-line {
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, #e8e8e8 50%, transparent 50%);
    background-size: 100% 8px;
  }
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dashboard > * {
  animation: fadeIn 0.5s ease-out forwards;
}

.dashboard > *:nth-child(2) {
  animation-delay: 0.1s;
}

.dashboard > *:nth-child(3) {
  animation-delay: 0.2s;
}
</style>

